<template>
	<notice :notice.sync="notice"></notice>
    <header-paper action="analyze" :cla-id="paper.class_cla_id"></header-paper>
    <div class="loading" v-if="loading">
        <i class="fa fa-spinner fa-spin fa-3x"></i>
    </div>

	<div class="container" id="analyze-container" v-if="!loading">
		<div class="row">
			<div class="col-md-2 col-md-offset-1">
				<p class="quiz-name">{{ paper.qus_name }}</p>
			</div>
			<div class="col-md-8">
				<button class="btn btn-success btn-sm rejudge"
						@click="rejudge" 
						v-tool-tip data-toggle="tooltip" data-placement="right" 
						title="学生提交测试后，老师修改题目信息，需要重阅">重阅试卷
				</button>
			</div>
		</div>
		<div class="row">
			<div class="col-md-8 col-md-offset-1 anal-title">
				<span class="anal-time">统计截至 {{ others.datetime.substring(0, 16)}}</span>
				<span class="anal-num">答卷人数 {{ others.submitNum + "/" + others.stuNum}}</span>
			</div>
			<div class="col-md-2">
				<button class="btn btn-success btn-sm exportQuizGrades pull-right">导出成绩表</button>
			</div>
		</div>
		<div v-show="others.submitNum > 0">
			<div class="row">
				<div class="col-md-10 col-md-offset-1">
					<div class="panel chart-panel">
						<div class="panel-body">
							<div class="chart-title">
								<span class="chart-til">得分统计</span>
								<div class="pull-right chart-tir">
									<span>满分：<strong>{{ others.totalScore }}</strong></span>
									<span>试卷平均分：<strong>{{ (+others.avg).toFixed(2) }}</strong></span>
									<span>(最高分{{ others.max }},最低分{{ others.min }})</span>
								</div>
							</div>
							<canvas id="anal-chart" width="900px" height="200px"></canvas>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-10 col-md-offset-1">
					<div class="panel panel-default">
						<div class="panel-heading que-heading">
							<a href="javascript:;" class="btn-sort" :class="{'btn-active':sortType.type==0}" @click="sortBySerial">
								题号
								<span class="glyphicon" :class="sortType.isAsc?'glyphicon-arrow-up':'glyphicon-arrow-down'"></span>
							</a><a href="javascript:;" class="btn-sort " :class="{'btn-active':sortType.type==1}" @click="sortByAccuracy">
							正确率
							<span class="glyphicon" :class="sortType.isAsc?'glyphicon-arrow-up':'glyphicon-arrow-down'"></span>
						</a>
							<div class="dropdown pull-right">
								<a class="btn-sort dropdown-toggle" href="javascript:;" data-toggle="dropdown">{{ typeValue[filterType] }} <span class="caret"></span></a>
								<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
									<li v-for="type in typeValue"><a href="javascript:;" v-on:click="filterType=$index">{{ type }}</a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row" v-for="que in questions" track-by="que_id">
				<div class="col-md-10 col-md-offset-1">
					<div class="panel anal-panel panel-default" v-show="filterType == 5 || filterType == que.que_type">
						<div class="panel-body">
							<div class="box-title">
								<span class="que-num">{{ que.que_num + "、" + typeValue[que.que_type] }}</span>
								<span class="que-score">分值 {{ que.que_score }}</span>
								<span class="text-danger" v-if="que.que_type<=2">答案 {{ que.que_answer}}</span>
								<span class="text-danger" v-if="que.que_type==3">答案 {{ que.que_answer }}</span>
								<span class="text-danger pull-right" v-if="que.que_type<=3">正确率 {{ que.accuracy }}</span>
							</div>
							<div class="box-body">
								<p>{{{ que.que_content }}}</p>
								<template v-if="que.que_type<=2">
									<div class="items" v-for="item in que.que_item" >
										{{ item.serial }}. {{{ item.content }}}
										<div class="clearfix">
											<div class="progress pull-left">
												<div class="progress-bar progress-bar-success" v-bind:style="'width: ' + item.per"></div>
											</div>
											<div class="item-det pull-left">
												<span class="text-primary">{{ item.num }}人</span>
												<span class="text-primary">{{ item.per }}</span>
											</div>
										</div>
									</div>
								</template>
								<template v-else>
									<div v-else>
										<p class="text-success">学生答案请在学生答卷中查看</p>
									</div>
								</template>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div v-show="others.submitNum <= 0">
			<div class="col-md-10 col-md-offset-1 anal-hint">
				<p>没有学生提交试卷，暂无数据分析</p>
			</div>
		</div>
	</div>
</template>

<script>
	import HeaderPaper from '../../Component/HeaderPaper/HeaderPaper';
    import Notice from '../../Component/Notice/Notice';
    import toolTip from '../../Directive/toolTip';

    export default {
    	created: function () {
    		this.getResult();
    		this.getPaperInfo();
    	},
    	directives: {
    		toolTip
    	},
    	data() {
    		return {
    			tpId: location.search.slice(1).split('=')[1],
    			notice: {type: 0, msg: ""},
    			loading: false,
    			paper: {},
    			questions: [], 
    			others: {},
    			typeValue : ["判断题", "单选题", "多选题", "填空题", "简答题", "全部题型"],
    			sortType: {type: 0, isAsc: true}, // 0->serial 1->accuracy
    			filterType: 5
    		}
    	},
    	components: {
    		HeaderPaper,
    		Notice
    	},
    	methods: {
    		getResult: function() {
    			this.loading = true;
    			this.$http.post('/stuResult/countResult', {qus_id: this.tpId}).then(function(resp) {
    				this.loading = false;
                    if (resp.data.status === 1) {
                    	var data = resp.data.data;
                    	this.others = {
							"stuNum": data.stu_num,
							"submitNum": data.submitNum,
							"passNum": data.passNum,
							"max": data.max,
							"min": data.min,
							"avg": data.avg,
							"datetime": data.datetime,
							"totalScore": data.total_score
						}

						data.questions.forEach((value) => {
							if (value.que_type <= 2) {
								value.que_item.forEach((item, index) => {
									item.serial = String.fromCharCode(65+index);
								})
								if (value.que_type == 0) {
									value.que_answer = value.que_answer?'对' : '错';
								} else {
									value.que_answer = value.que_answer.split("").map((item) => {
										return String.fromCharCode(65+parseInt(item));
									}).join('、');
								}
							}
						})
                    	this.questions = data.questions;

						if (data.submitNum > 0) {
							var i,
								group = data.group,
								labels = [],
								chartData = [],
								len = group.length,
								datasets = [
									{
										fillColor : "rgba(24, 188, 156, 1.0)",
										strokeColor : "rgba(24, 188, 156, 1.0)",
										data : chartData
									},
								];
							group.forEach((value) => {
								labels.push(value.range+'分');
								chartData.push(value.num);
							})
							this.$nextTick(function() {
								var ctx = document.getElementById("anal-chart").getContext("2d"),
								chart = new Chart(ctx).Bar(
									{labels: labels, 
									 datasets: datasets}, 
									{scaleGridLineWidth: 0, 
									 barValueSpacing : 50-(chartData.length-6)*5,
									 scaleLabel : "<%=value%>人"});
							});
						}
                    } else {
                        this.notice = {type: 0, msg: resp.data.message};
                    }
                }, function(resp) {
                    // error callback
                    this.loading = false;
                    this.notice = {type: 0, msg: resp.statusText};
                })
    		},
    		getPaperInfo: function() {
                this.$http.post('/questionSet/getQuizInfo', {qus_id: this.tpId}).then(function(resp) {
                    if (resp.data.status === 1) {
                        this.paper = resp.data.data;
                    }
                }, function(resp) {
                    // error callback
                    this.notice = {type: 0, msg: resp.statusText};
                })
            },
    		sortBySerial: function(event) {
    			if (this.questions.length < 2)
    				return;
    			if (this.sortType.type == 0) {
    				this.sortType.isAsc = !this.sortType.isAsc;
    				this.questions.reverse();
    			} else {
    				this.questions.sort(function(value1, value2) {
    					if (parseInt(value1.que_num) < parseInt(value2.que_num)) {
    						return -1;
    					} else if (parseInt(value1.que_num) > parseInt(value2.que_num)) {
    						return 1;
    					} else {
    						return 0;
    					}
    				});
    				this.sortType.isAsc = true;
    			}
    			this.sortType.type = 0;
    		},
    		sortByAccuracy: function() {
    			if (this.questions.length < 2)
    				return;
    			if (this.sortType.type == 1) {
    				this.sortType.isAsc = !this.sortType.isAsc;
    				this.questions.reverse();
    			} else {
    				this.questions.sort(function(value1, value2) {
    					var value1 = parseInt(value1.accuracy.split("%")[0]); // 拿到百分比
    					var value2 = parseInt(value2.accuracy.split("%")[0]);
    					if (value1 < value2) {
    						return 1;
    					} else if (value1 > value2) {
    						return -1;
    					} else {
    						return 0;
    					}
    				});
    				this.sortType.isAsc = true;
    			}
    			this.sortType.type = 1;
    		},
    		rejudge: function () {
    			this.$http.post('/stuResult/reappraise', {qus_id: this.tpId}).then(function(resp) {
                    if (resp.data.status === 1) {
                        this.notice = {type: 1, msg: resp.data.message};
                    } else {
                        this.notice = {type: 0, msg: resp.data.message};
                    }
                }, function(resp) {
                    // error callback
                    this.notice = {type: 0, msg: resp.statusText};
                })
    		}
    	}
    }
</script>

<style>
.container {
	margin-bottom: 100px;
}

.quiz-name {
	margin-top: 15px;
	font-size: 18px;
}

.anal-title {
	margin-top: 10px;
	margin-bottom: 20px;
}
.anal-time {
	background-color: #d8d8d8;
}

.anal-num {
	background-color: #d8d8d8;
	margin-left: 10px;
}

.chart-title {
	margin-top: 5px;
	margin-bottom: 10px;
	padding: 0 15px;
}
.chart-til {
	font-size: 16px;
}

.chart-tir span:first-child {
	margin-right: 20px;
}

.panel .que-heading {
	padding: 0;
	/*border: 1px solid #c8c8c8;*/
}

.btn-sort {
	display: inline-block;
	background-color: transparent;
	padding: 10px 25px;
	color: #000;
}

.btn-sort:hover {
	text-decoration: none;
}

.btn-sort:focus {
	text-decoration: none;
}

.btn-sort .glyphicon {
	color: transparent;
}

.btn-active .glyphicon {
	color: #18bc9c;
}

.btn-sort:first-child {
	/*border-right: 1px solid #c8c8c8*/
}

.dropdown .btn-sort {
	border-left: 1px solid #c8c8c8
}

.dropdown-menu>li>a {
	padding: 5px 20px;
}

.btn-active {
	color: #18bc9c;
	background-color: #fff;
}

.anal-panel .panel-body{
	padding: 20px 30px;
}

.anal-panel {
	/*border-color: #c6c6c6;
	border-radius: 0;*/
}

.anal-panel .que-num {
	margin-right: 20px;
}

.anal-panel .que-score {
	margin-right: 30px;
}

.anal-panel .box-body p {
	font-size: 16px;
	margin-top: 15px;
	margin-bottom: 15px;
}

.anal-panel .items {
	font-size: 16px;
	margin: 5px 0 5px;
}

.progress {
	margin: 5px 0 10px;
	width: 88%;
}

.item-det {
	font-size: 14px;
	margin: 4px 0 5px 10px;
}

.item-det span:first-child {
	margin-right: 15px;
}

.anal-hint {
	background-color: #e5e5e5;
	height: 200px;
}

.anal-hint p {
	line-height: 200px;
	text-align: center;
	font-size: 18px;
}
.chart-panel {
	overflow: auto
}
.rejudge {
	padding: 3px 9px;
	margin-top: 12px;
}
</style>